<template>
    <div class="clock-container" :class="`theme-${currentTheme}`"
        :style="{ backgroundImage: `url(${currentWallpaper})` }">
        <div class="main-content">
            <div class="time-wrapper time-display ">
                <span class="hour">{{ formattedTime.hour }}</span>
                <span class="colon">:</span>
                <span class="minute">{{ formattedTime.minute }}</span>
                <span class="colon">:</span>
                <span class="second">{{ formattedTime.second }}</span>
            </div>
            <div class="world-clock">
                <p class="sub-title">世界时钟</p>
                <div class="world-clock-grid">
                    <div v-for="(city, index) in worldCities" :key="index" class="city-card">
                        <span class="city-name">{{ city.name }}</span>
                        <span class="time-value">{{ worldTimes[index] }}</span>
                    </div>
                    <!-- </el-col> -->
                    <!-- </el-row> -->
                </div>
            </div>
            <div class="additional-info">
                <div class="lunar-card" @click="showLunarDetail = !showLunarDetail" style="cursor: pointer;">
                    <p>{{ lunarDate }}</p>
                    <p v-if="!showLunarDetail">农历：{{ lunarShort }}</p>
                    <p v-else>农历：{{ lunarDetail }}</p>
                </div>
                <div class="weather-card">
                    <p>天气：{{ weather }}</p>
                    <p>温度：{{ temperature }}</p>
                    <p v-if="weatherDetails">湿度：{{ weatherDetails.humidity }}%</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { Solar } from 'lunar-javascript';
import axios from 'axios';
import { DateTime } from 'luxon';

// 主题配置（10套主题示例）
const themes = ref([
    { id: 1, color: '#ff6b6b', wallpaper: 'https://images.pexels.com/photos/9394306/pexels-photo-9394306.jpeg?cs=srgb&dl=pexels-asadphoto-9394306.jpg&fm=jpg&_gl=1*jbcro5*_ga*ODU0OTIzNjQ5LjE3NTA0NzgwMDU.*_ga_8JE65Q40S6*czE3NTA0NzgwMDQkbzEkZzEkdDE3NTA0NzgwNjAkajQkbDAkaDA.' },
    { id: 2, color: '#4ecdc4', wallpaper: '/wallpapers/2.jpg' },
    { id: 3, color: '#45b7d1', wallpaper: '/wallpapers/3.jpg' },
    { id: 4, color: '#96ceb4', wallpaper: '/wallpapers/4.jpg' },
    { id: 5, color: '#ffeead', wallpaper: '/wallpapers/5.jpg' },
    { id: 6, color: '#ffcc5c', wallpaper: '/wallpapers/6.jpg' },
    { id: 7, color: '#ff6f69', wallpaper: '/wallpapers/7.jpg' },
    { id: 8, color: '#88d8b0', wallpaper: '/wallpapers/8.jpg' },
    { id: 9, color: '#6983aa', wallpaper: '/wallpapers/9.jpg' },
    { id: 10, color: '#a8e6cf', wallpaper: '/wallpapers/10.jpg' }
]);
const currentTheme = ref(1);
const currentWallpaper = ref(themes.value[0].wallpaper);

// 时间相关
const formattedTime = ref({ hour: '00', minute: '00', second: '00' });
const worldCities = ref([
    { name: '北京', zone: 'Asia/Shanghai' },
    { name: '纽约', zone: 'America/New_York' },
    { name: '伦敦', zone: 'Europe/London' },
    { name: '东京', zone: 'Asia/Tokyo' }
]);
const worldTimes = ref([]);
let timer = null;

// 农历黄历
const lunarDate = ref('');
const showLunarDetail = ref(false);
const lunarShort = ref('');
const lunarDetail = ref('');

// 天气
const weather = ref('加载中...');
const temperature = ref('');
const weatherDetails = ref(null);


// 初始化
onMounted(() => {
    // 时间更新
    updateTime();
    timer = setInterval(updateTime, 1000);

    // 农历初始化
    updateLunar();

    // 获取天气（示例接口，需替换为真实API）
    axios.get('https://api.open-meteo.com/v1/forecast?latitude=39.90&longitude=116.40&current_weather=true')
        .then(res => {
            weather.value = res.data.current_weather.weathercode === 0 ? '晴' : '多云';
            temperature.value = `${res.data.current_weather.temperature}°C`;
            weatherDetails.value = {
                humidity: res.data.daily.relative_humidity_2m[0],
                windSpeed: res.data.daily.wind_speed_10m[0],
                pressure: res.data.daily.surface_pressure[0]
            };
        });
});

// 时间更新函数
function updateTime() {
    const now = new Date();
    formattedTime.value = {
        hour: String(now.getHours()).padStart(2, '0'),
        minute: String(now.getMinutes()).padStart(2, '0'),
        second: String(now.getSeconds()).padStart(2, '0')
    };
    // 更新世界时钟时间
    worldTimes.value = worldCities.value.map(city => {
        return DateTime.now().setZone(city.zone).toFormat('HH:mm:ss');
    });
}

// 农历更新函数
function updateLunar() {
    let solar = Solar.fromDate(new Date());
    lunarDate.value = solar.toFullString().split(' ')[0];
    const lunar = solar.getLunar();
lunarShort.value = `${lunar.getMonthInChinese()}月${lunar.getDayInChinese()}日`;
lunarDetail.value = lunar.toFullString();
}

// 清理定时器
onUnmounted(() => {
    clearInterval(timer);
});

// 主题切换方法（暴露给父组件）
const switchTheme = (themeId) => {
    currentTheme.value = themeId;
    currentWallpaper.value = themes.value.find(t => t.id === themeId).wallpaper;
};

defineExpose({ switchTheme });
</script>

<style scoped>
.clock-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    margin: 0;
    padding: 2rem;
    overflow: auto;
    /* 允许内容滚动 */
    box-sizing: border-box;
}

.main-content {
    width: 100%;
    max-width: 1200px;
    padding: 2.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    backdrop-filter: blur(15px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.time-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.time-display {

    .hour,
    .minute,
    .second {
        font-size: clamp(3rem, 10vw, 8rem);
        font-weight: 900;
        background: linear-gradient(45deg, var(--theme-color) 20%, rgba(255, 255, 255, 0.8) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        letter-spacing: -0.05em;
        animation: breathe 4s ease-in-out infinite;
    }

    @keyframes breathe {

        0%,
        100% {
            opacity: 0.95;
        }

        50% {
            opacity: 1;
        }
    }

    margin-bottom: 0.2em;
}

.world-clock {
    margin-top: 2rem;
    padding: 1.5rem 2rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    max-width: 90%;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.world-clock:hover {
    transform: translateY(-4px);
}

.sub-title {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1rem;
}

.world-clock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
}

.city-card {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.city-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.city-card:hover {
    transform: translateY(-3px);
}

.city-name {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
}

.time-value {
    font-size: 1.6rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.colon {
    margin: 0 0.5rem;
}

.additional-info {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-top: 2.5rem;
    flex-wrap: wrap;
    padding: 0 1rem;
}

.lunar-card,
.weather-card {
    min-width: 200px;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease;
}

.lunar-card:hover,
.weather-card:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.05));
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.weather-info {
    font-size: 1.5rem;
    color: white;
    margin-top: 1rem;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* 主题变量 */
.theme-1 {
    --theme-color: #ff6b6b;
}

.theme-2 {
    --theme-color: #4ecdc4;
}

.theme-3 {
    --theme-color: #45b7d1;
}

.theme-4 {
    --theme-color: #96ceb4;
}

.theme-5 {
    --theme-color: #ffeead;
}

.theme-6 {
    --theme-color: #ffcc5c;
}

.theme-7 {
    --theme-color: #ff6f69;
}

.theme-8 {
    --theme-color: #88d8b0;
}

.theme-9 {
    --theme-color: #6983aa;
}

.theme-10 {
    --theme-color: #a8e6cf;
}
</style>